
<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <style>
      html, body { margin: auto 0; padding: 0; }
      body { height: 100vh; }
      #control {
        position: fixed; top: 0; right: 0; width: 300px;
        padding: 10px; box-sizing: border-box;
        background: white; opacity: 0.3; color: #666;
      }
    </style>
  </head>
  <body>
    <div id="control">
      <button id="pause">Pause</button>
      <br/>

      <select id="particle-count">
        <option value="2">4</option>
        <option value="10">100</option>
        <option value="32">1024</option>
        <option value="100" selected>10000</option>
        <option value="200">40000</option>
      </select>
      <label for="particle-count">Particle Count</label>
      <br/>

      <input type="range" min="1" max="3" value="3" step="1" id="image-count">
      <label for="image-count">Image Count</label>
      <br/>

      <div id="group-0">
        <select id="image-select-0">
          <option value="prague.jpg">Prague</option>
          <option value="jade.jpg">Jade</option>
          <option value="venus.jpg">Venus</option>
        </select>
        <label for="image-select-0">Image 0</label>
        <br/>
      </div>

      <div id="group-1">
        <select id="image-select-1">
          <option value="prague.jpg">Prague</option>
          <option value="jade.jpg" selected>Jade</option>
          <option value="venus.jpg">Venus</option>
        </select>
        <label for="image-select-1">Image 1</label>
        <br/>
      </div>

      <div id="group-2">
        <select id="image-select-2">
          <option value="prague.jpg">Prague</option>
          <option value="jade.jpg">Jade</option>
          <option value="venus.jpg" selected>Venus</option>
        </select>
        <label for="image-select-2">Image 2</label>
        <br/>
      </div>
    </div>
    <canvas></canvas>
    <script type="module" src="./image-explode.js"></script>
  </body>
</html>
